<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
    pageContext.setAttribute("path", path);
%>
<!DOCTYPE html>
<html>
<head>
    <base href="<%=this.getServletContext().getContextPath() %>/doctor/">
    <title>科室管理</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../static/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="../static/css/bootstrap-responsive.css"/>
    <link rel="stylesheet" type="text/css" href="../static/css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../static/css/select.css"/>
    <link rel="stylesheet" type="text/css" href="../static/css/checkbox.css"/>
    <script type="text/javascript" src="../static/js/jquery-3.4.1.js"></script>

    <script type="text/javascript" src="../static/js/select.js"></script>
    <script type="text/javascript" src="../static/js/bootstrap.js"></script>
    <script type="text/javascript" src="../static/js/ckform.js"></script>
    <script type="text/javascript" src="../static/js/common.js"></script>
    <!--消息提示框  -->
    <script type="text/javascript" src="../static/js/coco-message.js"></script>

</head>
<body>
<div class="well">
	<div class="alert alert-info" role="alert">
		<div style="width: 50%;float:left;">
	        <button type="button" class="btn btn-success" id="newNav">添加新科室</button>
	        <button type="button" class="btn btn-danger" id="delAll">批量删除</button>
	    </div>
		<div style="float: right;">
			<select name="department" id="department" class="select_box">
		        <option value="0">科室</option>
		        <option value="1">急诊科</option>
		        <option value="2">儿科</option>
		        <option value="3">妇科</option>
		        <option value="4">皮肤科</option>
		        <option value="5">内分泌科</option>
		        <option value="6">牙科</option>
		    </select>
			<input type="text" id="name" name="name" value="" placeholder="请输入医生姓名......." style="margin:5px;"/>
		    <input id="find" name="find" type="button" class="btn btn-default" value="查询"/>
    	</div>
	</div>

    <table class="table table-bordered table-hover definewidth m10">
        <thead>
        <tr>
            <th>
            	<label class="my_protocol">
				    <input class="input_agreement_protocol" type="checkbox" id="checkall" onClick="checkall();" />
				    <span></span>
				</label>
     		</th>
            <th>医生编号</th>
            <th>医生姓名</th>
            <th>联系方式</th>
            <th>所属科室</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="doctor-table">
       		 <!--添加数据  -->
        </tbody>
        
    </table>

    <div class="inline pull-right page">
        <a href='javascript:void(0);' id="firstPage">首页</a>

        <a href='javascript:void(0);' id=prePage>上一页</a>

        <a href='javascript:void(0);' id="nextPage">下一页</a>

        <a href='javascript:void(0);' id="lastPage">尾页</a>

        &nbsp;&nbsp;&nbsp;共<span class='current' id="current"></span>条记录
        <span class='current' id="pageTotal">  </span>页

    </div>
	<br>
</div>

<div class="modal fade" id="detailModal" tabindex="-1" role="dialog" aria-labelledby="detailModal"
         aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
            </div>
            <div class="modal-body">
                <div class="content">

                    <div class="input-group input-group-lg">
                        <span class="input-group-addon">@</span>
                        <input type="text" class="form-control" placeholder="Twitterhandle">
                    </div>
                    <div class="input-group input-group-lg">
                        <span class="input-group-addon">@</span>
                        <input type="text" class="form-control" placeholder="Twitterhandle">
                    </div>

                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>


<script>

    function showList(page, department, name) {
        $.ajax({
            url: "${path}doctors/list?page=" + page + "&department=" + department + "&name=" + name,
            type: "GET",
            dataType: "json",
            success: function (message) {
                $("#doctor-table tr").remove();
                console.log(message);
                $("#current").text(message.count); // 共多少条记录
                $("#pageTotal").text(message.countPage); // 页数
                $("#firstPage").attr("page", 1);
                $("#prePage").attr("page", message.prePage);
                $("#nextPage").attr("page", message.nextPage);
                $("#lastPage").attr("page", message.countPage);

                var datas = message.pageList;
                $.each(datas, function (index, item) {
                    card(item);
                })

            }
        });
    }


    // 页面初始化加载:列表

    $(function () {

        var page = 1;
        var department = $("#department option:selected").val();
        var name = $("#name").val();
        showList(page, department, name);

    });

    function card(item) {
        var tr = "<tr>" +
            /* "<th><input type='checkbox' value='" + item.did + "'" + "></th>" + */
            "<th><label class='my_protocol'><input class='input_agreement_protocol' type='checkbox' value='" + item.did + "'" + "  /><span></span></label></th>" +
            "<td>" + item.did + "</td>" +
            "<td>" + item.name + "</td>" +
            "<td>" + item.phone + "</td>" +
            "<td>" +"<span class='"+item.tag_color+"' style='padding: 6px;'>" + item.dname +"</span>"+ "</td>" +
            "<td>" +
            "<button type='button' class='btn btn-info' onclick='doctor_detail(" + item.did + ")' >详情</button>" +
            "<button class='btn btn-warning' type='button' onclick='doctor_edit(" + item.did + ")' >修改</button>" +
            "<button type='button' class='btn btn-danger' onclick='doctor_delete(" + item.did + ")'>删除</button>" +

            "</td>" +
            "</tr>";
        $("#doctor-table").append($(tr));
    }
	
    
    

    $("#firstPage").click(function () {

        var page = $(this).attr("page");
        var department = $("#department option:selected").attr("value");
        var name = $("#name").val();
        showList(1, department, name);
    });
    // 上一页：
    $("#prePage").click(function () {

        var page = $(this).attr("page");
        var department = $("#department option:selected").attr("value");

        var name = $("#name").val();
        showList(page, department, name);
    });
    // 下一页：
    $("#nextPage").click(function () {

        var page = $(this).attr("page");
        var department = $("#department option:selected").attr("value");

        var name = $("#name").val();
        showList(page, department, name);
    });
    // 最后一页
    $("#lastPage").click(function () {

        var page = $(this).attr("page");
        var department = $("#department option:selected").attr("value");

        var name = $("#name").val();
        showList(page, department, name);
    });
    //监听科室变化
    $("#department").change(function () {
        var department = $("#department option:selected").attr("value");
        var page = 1;
        var name = $("#name").val();
        showList(page, department, name);
    });

    $("#find").click(function () {
        var department = $("#department option:selected").attr("value");
        var page = 1;
        var name = $("#name").val();
        showList(page, department, name);
    });

    // 暂时先这样.
    $("#ret").click(function () {
        $("#name").val("");
    });
    // 添加按钮，href 改变为 doctor/add.jsp
    $("#newNav").click(function () {
        window.location.href = "${path}doctor/add.jsp";

    });

    function checkall() {
        var status = $("#checkall").prop("checked");
        console.log(status);
        if (status) {
            console.log("选中");
            $("#doctor-table input[type='checkbox']").prop("checked", true);
        } else {
            console.log("取消选中");
            $("#doctor-table input[type='checkbox']:checked").prop("checked", false);
        }

    }


    $("#delAll").click(function () {
        var checkboxs = $("#doctor-table input[type='checkbox']:checked");
        if (checkboxs.length == 0) {
            alert("请至少选中一条数据");
            return false;
        } else {
            var set = new Set();
            $.each(checkboxs, function (index, item) {
                set.add($(item).attr("value"));
            })
            console.log(Array.from(set));
            if (confirm("您确认要删除这些数据吗?")) {
                console.log("用户确定要删除这些数据。");

                $.ajax({
                    url: "${path}doctors/delete",
                    type: "post",
                    data: {"did": Array.from(set).toString()},
                    dataType: "json",
                    success: function (message) {
                        // 删除成功的话
                        if (message.status_code == 200) {
                            alert("删除成功");
                            location.reload();
                        } else {
                            alert("删除失败！")
                        }
                    }, error: function () {
                        alert("异常")
                    }

                });
            } else {
                console.log("用户取消了批量删除.");
            }

        }


    });

    // 删除
    function doctor_delete(did) {
        if (confirm("您确认要删除这条数据吗?")) {
            console.log("用户确定要删除这条数据。");

            $.ajax({
                url: "${path}doctors/delete",
                type: "post",
                data: {"did": did},
                dataType: "json",
                success: function (message) {
                    // 删除成功的话
                    if (message.status_code == 200) {
                        alert("删除成功");
// 	 	 					var nextPage = parseInt($("#firstPage").attr("value"));
// 	 	 					var page = parseInt($("#firstPage").attr("value")) + 1;

// 	 	 					if(page >nextPage){
// 	 	 						page = nextPage;
// 	 	 					}

// 	 	 			 	 	var department = $("#department option:selected").val();

// 	 	 			 		var name = $("#name").val();
// 	 	 			 		showList(page.toString(),department,name);

                        location.reload();


                    } else {
                        alert("删除失败！")
                    }
                }, error: function () {
                    alert("异常")
                }

            });
        } else {
            console.log("用户取消了单条数据删除.");
        }

    }

    // 详情
    function doctor_detail(did) {

        window.location.href = "${path}doctor/look.jsp?did=" + did;

    }

    // 修改
    function doctor_edit(did) {

        window.location.href = "${path}doctor/edit.jsp?did=" + did;

    }


</script>

</body>
</html>
